<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title></title>
  <style lang="scss" scoped>
    html,
    body {
      height: 100%;
      width: 100%;
      margin: 0;
      background-color: #243559;
    }

    .esri-view-surface--touch-none::after {
      border: none !important;
    }

    .esri-popup__button.esri-popup__button--dock {
      display: none;
    }

    .esri-popup__button.esri-popup__action {
      display: none !important;
    }

    .esri-popup__footer.esri-popup__footer--has-actions {
      display: none !important;
    }

    .status {
      display: inline-block;
      width: 50px;
      height: 22px;
      text-align: center;
      border-radius: 4px;
      line-height: 22px;
    }

    .normal {
      background-color: #ecfdd1;
      border: 1px solid #ecfdd1;
      color: #70b603;
    }

    .failure {
      background-color: #fdedd7;
      border: 1px solid #fdedd7;
      color: #f59a23;
    }

    .tab {
      width: 100%;
    }

    .tab span {
      background-color: inherit;
      font-size: 16px;
      float: left;
      border: none;
      outline: none;
      cursor: pointer;
      padding: 6px;
      transition: 0.3s;
    }

    .tabLinks {
      color: #aaa;
      margin-right: 20px;
    }

    .active {
      color: #488bf0;
    }

    .tabContent {
      padding: 6px 6px;
    }

    /* Tooltip 容器 */
    .tooltip {
        position: relative;
        display: inline-block;
        border-bottom: 1px dotted black; /* 悬停元素上显示点线 */
    }
    
    /* Tooltip 文本 */
    .tooltip .tooltiptext {
        visibility: hidden;
        background-color: black;
        color: #fff;
        text-align: center;
        padding: 5px 6px;
        border-radius: 6px;

        bottom: 100%;
        left: 50%; 
        margin-left: -60px; /* 使用一半宽度 (120/2 = 60) 来居中提示工具 */
    
        /* 定位 */
        position: absolute;
        z-index: 1;

    }
    
    /* 鼠标移动上去后显示提示框 */
    .tooltip:hover .tooltiptext {
        visibility: visible;
    }
  </style>
    <script type="text/javascript" src="http://172.8.0.205:9091/api/init.js?v=2.1&appSecret=f6ee85b0f7ddea1983a22e9fcec60ff0&appKey=28a28e46d69df459a9cdec9a9c213afd"></script>
    <!-- 西安环境 -->
    <!-- <script type="text/javascript" src="http://10.226.0.76:8280/api/init.js?v=2.1&appSecret=37cc3b51b3420e1fbf207e7d94aa7383&appkey=08b82889d3d48fc51d110c2ca9c13351"></script> -->
</head>

<body>
  <div id="mapdiv" style="width: 100%;height: 100%;"></div>
  <script>
    const BASE = {
      ZT_Tile_ZLXY_Technology_Label: 3810, // 咸阳大场景 底图
      T5F1_Tile_ZLXY_Normal_Label: 42068, // 咸阳T5F1
      T5F2_Tile_ZLXY_Normal_Label: 42069 // 咸阳T5F1
    }
    //西安环境
    // const BASE = {
    //   ZT_Tile_ZLXY_Technology_Label: 20222, // 咸阳大场景 底图
    //   T5F1_Tile_ZLXY_Normal_Label: 20256, // 咸阳T5F1
    //   T5F2_Tile_ZLXY_Normal_Label: 20258, // 咸阳T5F2
    //   T5F2_Tile_ZLXY_Normal_Label: 20259, // 咸阳T5F3
    //   T5F2_Tile_ZLXY_Normal_Label: 20252, // 咸阳T5B1
    //   T5F2_Tile_ZLXY_Normal_Label: 20253, // 咸阳T5B2
    //   T5F2_Tile_ZLXY_Normal_Label: 20254 // 咸阳T5B3
    //     }
    var BNMap;
    // 此类为符号类，用于创建各种符号
    var BNSymbol;
    // 此类未几何类
    var BNGeometry;
    var basFactory;
    var BNWindows;
    var BNRoutePlanning;
    var BNTrackAnimation;
    var BNTrackReplays;
    var BNHeatMap;
    var bnSketch = null;
    var bnSketchObj = null;

    require(["js/BNFactory", "js/BNSketch", "esri/widgets/Sketch/SketchViewModel", "js/BNSymbol", "js/BNGeometry"], function (BNFactory, BNSketch, SketchViewModel) {
      basFactory = {
        BNFactory: BNFactory
      }
      bnSketchObj = BNSketch;
      // 初始化地图
      BNMap = new BNFactory(BASE.ZT_Tile_ZLXY_Technology_Label, {
        "id": "mapdiv",
        "options": {
          logo: false,
          slider: false,
          minZoom: 1,
          maxZoom: 21,
          isSwitchFloor: false,
        }
      });
      // BNMap = new BNFactory('20222', {
      //   "id": "mapdiv",
      //   "options": {
      //     logo: false,
      //     slider: false,
      //     minZoom: 1,
      //     maxZoom: 21,
      //     isSwitchFloor: false,
      //   }
      // });
      BNSymbol = new BNFactory("BNSymbol", BNMap);
      BNGeometry = new BNFactory("BNGeometry", BNMap)
      BNWindows = new BNFactory("BNWindow")
      BNRoutePlanning = new BNFactory("BNRoutePlanning", BNMap)
      BNTrackAnimation = new BNFactory("BNTrackAnimation", BNMap)
      BNTrackReplays = new BNFactory("BNTrackReplays", BNMap)
      BNHeatMap = new BNFactory("BNHeatMap", BNMap);
      BNMap.bindEvent(null, "load", function () {
        BNMap.setLevel(5)
        window.parent.postMessage("load", "*")
      })
      // 固定地图弹窗出现的方向
      BNMap.view.popup.alignment = "top-center"
      BASE.drawHeatMap = function (array) {
        BNMap.InnerMap.when(function () {
          BNHeatMap = new BNFactory("BNHeatMap", BNMap);
          BNHeatMap.init(array);
        })
      }
      BASE.playVideo = function (url) {
        setTimeout(function () {
          $(".myVideo").attr({ src: url })
          $(".myVideo")[0].play()
        }, 100)
      }
      // 用于为地图弹窗界面补充新的html代码
      BASE.addHtml = function (className, html) {
        setTimeout(function() {
          $("." + className).html(html)
          $($(".esri-popup__header").children()[0]).click(function(){
            setTimeout(function() {
              $("." + className).html(html)
            }, 100)
          })
        }, 100)
      }
      // 用于为地图弹窗界面补充的html代码补充keyup事件
      BASE.addKeyUpEvent = function (className) {
        setTimeout(function() {
          $("." + className).on("keyup", function () {
            var temp = $("." + className).val()
            if(temp.length > 10){
              useParentFun("inputMsg", "点位名称长度不能超过10个字符！")
              $("." + className).val(temp.substring(0,10))
            }
          })
            $("." + className).on("invlid", function () {
                console.log(111111111111111111)
            })
        }, 100)
      }
      // 用于为地图弹窗界面的按钮添加事件调用，此处的classNames为弹窗中的控件class数组
      // 需要传入：触发事件的按钮的class，控件class数组，事件名称
      BASE.getValue = function (eventClassName, classNames, funName) {
        setTimeout(function () {
          var values = []
          $("." + eventClassName).on("click", function (event) {
            classNames.forEach(item => {
              values.push($("." + item).val())
            })
            useParentFun(funName, values)
          })
        }, 100)
      }
      BASE.move = function (obj) {
        var sketchViewModel = new SketchViewModel({
          view: BNMap.InnerMap,
          layer: obj,
          updateOnGraphicClick: true
        })
        sketchViewModel.on("update", function (event) {
          getEventState(event)
        });
      }
      BASE.initSketch = function () {
        if (!bnSketch || !bnSketch.sketch.state) {
          graphicsLayer = BNMap.creatGraphicsLayer({ "id": "sketchLayer" });
          BNMap.addGraphicsLayer(graphicsLayer);
          var view = BNMap.InnerMap;
          var skOptions = {};
          skOptions.layer = graphicsLayer;
          skOptions.view = view;
          skOptions.creationMode = "update";
          skOptions.visible = false;
          skOptions.snappingOptions = {  // autocasts as SnappingOptions()
            enabled: true,
            // enable snapping on the graphicslayer by default
            featureSources: [{ layer: graphicsLayer, enabled: true }]
          },
            skOptions.visibleElements = {  // hide/show sketch elements
              createTools: {
                "circle": false  // hide the circle tool
              },
              selectionTools: {
                "lasso-selection": false  // hide the lasso-selection tool
              }
            }
          bnSketch = new bnSketchObj(BNMap, skOptions);
          bnSketch.on("create", function (event) {
            if (event.state === "complete") {
              getRingsThenReturn(event.graphic.geometry)
              console.log("111111111");
            }
            if (event.state === "start") {
              console.log("222222222222");
            }
          });

          bnSketch.on("delete", function (event) {
            console.log("3333333333");
          });

          bnSketch.on("update", function (event) {
            getEventState(event)
          });
        }
      }
      function getEventState(event) {
        if (event.state === "complete" || (event.state == "active" && event.toolEventInfo.type == 'reshape-stop')) {
          getRingsThenReturn(event.graphics[0].geometry)
          console.log("图形更新操作完成");
        }
        if (event.state === "complete" || (event.state === "active" && event.toolEventInfo.type == 'move-stop')) {
          getRingsThenReturn(event.graphics[0].geometry)
          console.log("图形移动停止");
        }
      }
      // 使用该方法必须在父页面显式声明  window[方法名]，否则无法调用
      function useParentFun(funName, val) {
        // 调用父页面的方法
        window.parent[funName](val);
      }
      // 用于获取绘制图形之后的坐标对象并返回
      // obj代表坐标对象集合，当绘制平面图形时，obj包含rings坐标集合，当绘制点时，obj会包含x和y坐标
      // 获取坐标后，会调用父类的bnSketchComplete方法，该方法在使用此功能的页面调用即可
      function getRingsThenReturn(obj) {
        if (obj.rings != undefined) {
          BASE.rings = obj.rings;
        } else {
          BASE.rings = [obj.x, obj.y];
        }
        // 调用父页面的方法
        window.parent['bnSketchComplete'](BASE.rings);
      }
      //绘制点
      BASE.point = function () {
        BASE.initSketch();
        setTimeout(function () {
          bnSketch.create("point", { mode: "hybrid" });
        }, 16)
      }
      //绘制线段
      BASE.polyline = function () {
        BASE.initSketch();
        setTimeout(function () {
          bnSketch.create("polyline", { mode: "hybrid" });
        }, 16)
      }

      //绘制多边形
      BASE.polygon = function () {
        BASE.initSketch();
        setTimeout(function () {
          bnSketch.create("polygon", { mode: "hybrid" });
        }, 16)
      }

      //绘制矩形
      BASE.rectangle = function () {
        BASE.initSketch();
        setTimeout(function () {
          bnSketch.create("rectangle", { mode: "hybrid" });
        }, 16)
      }

      //绘制圆形
      BASE.circle = function () {
        BASE.initSketch();
        setTimeout(function () {
          bnSketch.create("circle", { mode: "hybrid", hasZ: false });
        }, 16)
      }

      //清除绘制
      BASE.cancel = function () {
        bnSketch.skDel();
      }
      //编辑图形
      BASE.openEdit = function (data) {
        BASE.initSketch();
        bnSketch.sketch.update(graphics, { tool: 'reshape' });
      }

      //关闭编辑
      BASE.closeEdit = function (data) {
        if (bnSketch.sketch.state) {
          bnSketch.destroy();
        }
      }
    });

    // 设置点击事件
    function setClick(id, fun) {
      BNMap.bindEvent(id, "click", evt => {
        fun(evt)
        setTimeout(function () {
          $(".tabLinks").on("click", function (evt) {
            var i, tabContent, tabLinks;
            tabContent = document.getElementsByClassName("tabContent");
            for (i = 0; i < tabContent.length; i++) {
              tabContent[i].style.display = "none";
            }
            tabLinks = document.getElementsByClassName("tabLinks");
            for (i = 0; i < tabLinks.length; i++) {
              tabLinks[i].className = tabLinks[i].className.replace(" active", "");
            }
            $(".tabContent-" + evt.target.classList[1]).css("display", "block");
            evt.currentTarget.className += " active";
          })
        }, 100)
      })
    }
    // 返回map对象
    function getMap() {
      return BNMap;
    }

    function getBNSymbol() {
      return BNSymbol;
    }

    function getBNGeometry() {
      return BNGeometry;
    }

    function getBNWindows() {
      return BNWindows;
    }

    function getBNRoutePlanning() {
      return BNRoutePlanning;
    }

    function getBNTrackAnimation() {
      return BNTrackAnimation;
    }

    function getBNTrackReplays() {
      return BNTrackReplays;
    }

    function getBNHeatMap() {
      return BNHeatMap;
    }

    function getBase() {
      return BASE;
    }
  </script>
</body>

</html>
